﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>培训计划覆盖量统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../static/css/font.css">
    <link rel="stylesheet" href="../../../static/css/weadmin.css">
    <link href="../../lib/layui/css/layui.css" rel="stylesheet" />
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="weadmin-nav">
        <span class="layui-breadcrumb" style="visibility: visible;">
            <a href="#">首页</a><span lay-separator="">/</span>
            <a href="#">查询统计</a><span lay-separator="">/</span>
            <a><cite>计划学习覆盖量统计</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i>
        </a>
    </div>


    <div class="weadmin-body">

        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-row">
                    <label class="layui-form-label">计划名称:</label>
                    <div class="layui-input-inline" style="width:500px">
                        <select id="TPID" name="TPID" class="valid"></select>
                    </div>
                    <div class="layui-input-inline" style="width:100px;display:none">
                        <button type="button" class="layui-btn layui-btn-primary" id="find" name="查询"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                </div>
                </div>
        </div>
        <div class="left-nav" style=" left :10px; top:100px; bottom:0px; padding-top: 0px;width:200px">
            <div id="side-nav">
                <div class="layui-form">
                    <ul id="nav"></ul>
                </div>
            </div>
        </div>
        <div class="page-content" style="top:94px; bottom:20px;left:220px">
            <!--<div class="layui-tab-content">-->
            <!--<div class="layui-tab-item layui-show">-->
            <table id="memberList" lay-filter="memberList"></table> 
            <!--</div>-->
            <!--</div>-->
        </div>

    </div>

        <script src="../../../lib/layui/layui.js" charset="utf-8"></script>

        <script> 
            layui.use(['table','form', 'layer'], function () {
                var table = layui.table,
                    layer = layui.layer,
                    form = layui.form,
                    $ = layui.jquery;

                //获取页面角色id，并根据角色id获取对应模块，并进行对应的遍历绑定
                $('ul').on('click', 'li', function () {
                    roleid = $(this).attr('id');//获取到绑定的li的id即roleid
                    $.each($("#nav li"), function () {
                        $(this).css("background", "RGB(238,238,238)");
                    });
                    $(this).css("background", "rgb(47,162,147)");

                    if ($("#TPID").val() == "") {
                        layer.msg("请选择计划！");
                        return;
                    }
                    else {
                        //showList(searchlevel);
                        var searchlevel = roleid.toString().substring(roleid.length - 1);
                        //alert(searchlevel)
                        //layer.msg(roleid + '--' + searchlevel);
                        showList(searchlevel);
                    }

                    //var postdata = { "RoleID": roleid };
                    ////post请求api得到该角色所拥有模块并进行对应绑定
                    //$.post(ApiUrl + 'RolePower/GetModuleByRoleID', postdata, function (data) {
                    //    if (data.StatusCode == 200) {
                    //        //赋值给界面列表
                    //        $(function () { showList(data.Data); })
                    //    } else {
                    //        layer.msg(data.Info);
                    //    }
                    //});
                });

                function showrole() {
                    var rolearray = ['车间1', '车队', '乘务员'];
                    for (var i = 0; i < rolearray.length; i++) {

                        var htmlmenu = "";
                        htmlmenu += '<li id="' + 'role' + (i+1).toString() + '"  >';
                        htmlmenu += '<a href="javascript:;"><i class="iconfont">&#xe6b8;</i><cite >' + rolearray[i] + '</cite></a>';
                        htmlmenu += "</li>";
                        $("#nav").append(htmlmenu);
                    }
                }
                 
                function showList(searchlevel) {

                    var swhere = JSON.stringify({
                        TPID: $("#TPID").val(),
                        searchLevel: searchlevel
                    });
                    table.render({
                        id: "memberList",
                        elem: '#memberList',
                        //method:'post',
                        url: ApiUrl + 'TrainCourseStudyUser/GetTrainCourseStudyUser', //数据接口,
                        headers: {
                            "userid": JSON.parse(window.localStorage.authInfo).UserId,
                            "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                        },
                        where: { swhere: swhere },
                        cellMinWidth: 80,
                        //totalRow: true,
                        //toolbar: "#toolbar",
                        cols: [
                            [
                                { type: 'checkbox' },
                                { field: 'TPName', title: '计划名称', width: 300, totalRowText: '合计'},
                                { field: 'DeptID', title: '部门ID', width: 80, hide: true },
                                { field: 'DeptName', title: '部门名称', width: 200 },
                                { field: 'needtrainnum', title: '应培次数', width: 150, totalRow: true },
                                {
                                    field: 'studyusernum', title: '已培次数', width: 150, totalRow: true
                                    //, templet: function (d) {
                                    //    if (d.studyusernum < d.needtrainnum) {
                                    //        return '<div style="background:red; color: #FFFFFF">' + d.studyusernum + '</div>' 
                                    //    }
                                    //    else return d.studyusernum
                                    //}
                                },
                                { field: 'rate', title: '覆盖率(%)', width: 200 },
                                { field: 'IsEnd', title: '计划状态', width: 100 }
                            ]
                        ],
                        parseData: function (res) { //res 即为原始返回的数据
                            return {
                                "code": res.StatusCode, //解析接口状态
                                "msg": res.Info, //解析提示文本
                                "count": res.Count, //解析数据长度
                                "data": res.Data //解析数据列表
                            };
                        },
                        response: { statusCode: 200 },//规定成功的状态码，默认：0
                        event: true,
                        page: true,
                        limit:15,
                        done: function (res, curr, count) {
                            if (res.code == 200) {
                                for (var i = 0; i < res.data.length; i++) {
                                    if (res.data[i].studyusernum < res.data[i].needtrainnum) {
                                        var tr = $('.layui-table-body tbody tr[data-index="' + i + '"]');
                                        var td = $('.layui-table-body tbody tr[data-index="' + i + '"] td[ data-field="studyusernum"]')
                                        tr.css('background-color', 'rgb(255,0,0)');
                                        tr.css('color', 'black');
                                    }
                                }
                            }
                            //res.data.forEach(function (item, index) {
                            //    if (item.studyusernum < item.needtrainnum) {
                            //        var tr = $('.layui-table-body tbody tr[data-index="' + index + '"]');
                            //        var td = $('.layui-table-body tbody tr[data-index="' + index + '"] td[ data-field="studyusernum"]')
                            //        tr.css('background-color', 'red');
                            //        tr.css('color', 'black');
                            //        //tr.each(function () {
                            //        //    var text = $(this).text();
                            //        //    if (text > 30 && text < 50) {
                            //        //        $(this).css('background-color', 'rgba(251,230,160,0.5)');
                            //        //    } else if (text > 50 && text < 80) {
                            //        //        $(this).css('background-color', 'red');
                            //        //    }
                            //        //});
                            //    }
                            //});
                            //如果是异步请求数据方式，res即为你接口返回的信息。
                            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 
                            if (res.code == 401) {
                                //layer.msg(res.msg);
                            }
                            if (res.code == 403) {
                                layer.alert(res.msg, function () {
                                    top.location.href = '../../login.html';
                                })
                            }
                        }
                    });
                }
                 
                $(function () {
                    showrole();
                    showList();
                });

                //加载部门信息，角色信息，机务段信息
                $.ajax({
                    url: ApiUrl + "TrainPlan/Sel",
                    type: 'get',
                    headers: {
                        "userid": JSON.parse(window.localStorage.authInfo).UserId,
                        "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                    },
                    success: function (data) {
                        if (data.StatusCode == 200) {
                            $("#TPID").append("<option value=''></option>");
                            $(data.Data).each(function (index, item) {
                                $("#TPID").append("<option value='" + item.TPID + "'>" + item.TPName + "</option>");
                            });
                            form.render();//必须，不然动态加载项不显示
                        }
                        else if (data.StatusCode == 403) {
                            layer.alert(data.Info, function () {
                                location.href = '../../login.html';
                            })
                        }
                        else {
                            layer.msg(data.Info);
                        }
                    }
                });

            });
        </script>
</body>
</html>